<template>
  <a-config-provider :locale="locale">
    <template v-if="noLayout">
      <router-view v-slot="{ Component }" :key="$route.fullPath">
        <transition name="slide-fade">
          <component :is="Component" />
        </transition>
      </router-view>
    </template>
    <template v-else>
      <template v-if="isLogin">
        <Login />
      </template>
      <a-layout class="mqj-layout" v-else>
        <a-layout-sider
          v-model:collapsed="collapsed"
          :trigger="null"
          collapsible
        >
          <div class="logo">
            <img src="@/assets/logo.png" width="101" height="55" alt="logo" />
          </div>
          <MenuList :menu-list="menuList" />
        </a-layout-sider>
        <a-layout>
          <a-layout-header class="mqj-layout-header">
            <a-row type="flex" justify="space-between">
              <a-col :span="1">
                <menu-unfold-outlined
                  v-if="collapsed"
                  class="trigger"
                  @click="() => (collapsed = !collapsed)"
                />
                <menu-fold-outlined
                  v-else
                  class="trigger"
                  @click="() => (collapsed = !collapsed)"
                />
              </a-col>
              <a-col :span="22">
                <a-menu
                  mode="horizontal"
                  theme="dark"
                  v-model:selectedKeys="moduleKey"
                >
                  <a-menu-item v-for="m in showModules" :key="m.name">
                    <router-link :to="m.path">
                      {{ m.meta.title }}
                    </router-link>
                  </a-menu-item>
                </a-menu>
              </a-col>
              <a-col :span="1" class="mqj-avatar">
                <a-dropdown>
                  <a href="javascript:;">
                    <a-avatar shape="square" size="large">
                      <template #icon><UserOutlined /></template>
                    </a-avatar>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a href="javascript:;" @click="loginOut">退出登录</a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </a-col>
            </a-row>
          </a-layout-header>
          <a-row class="page-row">
            <a-col :span="12">
              <a-breadcrumb>
                <a-breadcrumb-item
                  v-for="(bread, k) in breads"
                  :key="bread.path"
                >
                  <router-link
                    v-if="k < breads.length - 1 && !bread.meta.beardDisable"
                    :to="bread.showPath"
                  >
                    {{ bread.meta.title }}
                  </router-link>
                  <span v-else> {{ bread.meta.title }} </span>
                </a-breadcrumb-item>
              </a-breadcrumb>
            </a-col>
            <a-col :span="12" class="mqj-recent">
              <a-dropdown>
                <a class="ant-dropdown-link" @click.prevent>
                  最近访问
                  <DownOutlined />
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item
                      v-for="link in recentList"
                      :key="link.showPath"
                    >
                      <router-link
                        :to="link.showPath"
                        style="display: inline-block; width: 100%"
                      >
                        {{ link.title }}
                      </router-link>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-col>
          </a-row>
          <a-layout-content class="page-content">
            <div class="page-content-body">
              <transition name="slide-fade">
                <router-view v-slot="{ Component }" :key="$route.fullPath">
                  <component :is="Component" />
                </router-view>
              </transition>
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </template>
  </a-config-provider>
</template>
<script>
  import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
    DownOutlined,
  } from '@ant-design/icons-vue';
  import {
    defineComponent,
    reactive,
    toRefs,
    watch,
    getCurrentInstance,
  } from 'vue';
  import { useRouter } from 'vue-router';
  import MenuList from './components/menuList.vue';
  import Login from './login/index.vue';
  // import { DEFAULT_URL, USERINFO } from '@/mqj/mqj.config';
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import 'moment/dist/locale/zh-cn';

  export default defineComponent({
    components: {
      MenuFoldOutlined,
      MenuUnfoldOutlined,
      UserOutlined,
      DownOutlined,
      MenuList,
      Login,
    },

    setup(props, context) {
      const internalInstance = getCurrentInstance();
      const gvm = internalInstance.appContext.config.globalProperties;
      const modules = gvm.rh.modules;
      const router = useRouter();

      const state = reactive({
        locale: zhCN,
        collapsed: false,
        // menuList: gvm.$route.matched[0].children || [],
        menuList: [],
        modules,
        showModules: modules.filter((item) => !item.meta.hidden),
        breads: [],
        recentList: [],
        isLogin: false,
        moduleKey: [],
        noLayout: false,
      });

      const loginOut = () => {
        router.push({
          name: 'login',
        });
        //  去除userinfo
        gvm.$userInfo = null;
        localStorage.removeItem(USERINFO);
      };

      const toggleCollapsed = () => {
        state.collapsed = !state.collapsed;
        // state.openKeys = state.collapsed ? [] : state.preOpenKeys;
      };

      watch(
        () => gvm.$route,
        (val, oldVal) => {
          if (val.name == 'NotFound') {
            if (val.fullPath == '/') {
              gvm.$router.push(DEFAULT_URL);
              state.noLayout = false;
            } else {
              state.noLayout = true;
            }
            return;
          }
          if (gvm.$route.query.nolayout == 1) {
            state.noLayout = true;
          } else {
            state.noLayout = false;
          }

          if (!gvm.$userInfo && gvm.$route.fullPath.indexOf('/login') == -1) {
            loginOut();
            return;
          }

          if (val.fullPath == '/') {
            gvm.$router.push(DEFAULT_URL);
            return;
          }

          if (gvm.$route.fullPath.indexOf('/login') > -1) {
            state.isLogin = true;
          } else {
            state.isLogin = false;
            state.moduleKey = [val.matched[0].meta.moduleName];
            let moduleName = gvm.rh.getCurrentModuleName(val);

            state.menuList = gvm.rh.originRoutes.find(
              (m) => m.name == moduleName
            ).children;
            state.breads = gvm.rh.getBreadcrumbs(val.matched, val.params);
            state.recentList = gvm.rh.getRecentList();
          }
        }
      );

      return {
        ...toRefs(state),
        toggleCollapsed,
        loginOut,
        // toLogin,
      };
    },
  });
</script>
<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  #app .logo {
    width: 100%;
    height: 31px;
    /* background: rgba(255, 255, 255, 0.2); */
    margin: 16px 24px 16px 0;
    float: left;
  }
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 16px;
  }
  .logo img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  .mqj-layout {
    height: 100vh;

    .mqj-layout-header {
      padding: 0 16px;
      background: #001529;
    }

    .mqj-avatar,
    .mqj-recent {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .trigger {
      font-size: 18px;
      line-height: 64px;
      cursor: pointer;
      transition: color 0.3s;
      color: #fff;
    }

    .trigger:hover {
      // color: #1890ff;
    }

    .site-layout .site-layout-background {
      background: #fff;
    }
    .page-row {
      padding: 16px;
    }
    .page-content {
      padding: 0 16px 16px;
      min-height: 280px;
      overflow: auto;
    }
    .page-content-body {
      background: #fff;
      padding: 16px;
      min-height: 100%;
    }
  }
  .slide-fade-enter-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-leave-active {
    transition: all 0s;
  }
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateY(20px);
    opacity: 0;
  }
</style>
